<template>
	<div id="temp">
		<!-- 1.0 轮播图 -->
		<div class="silder">
			<slider :imgs="imgs"></slider>
		</div>
		
		<!--2.0 实现商品购买区-->
		<div id="buy">
			<h4>{{info.title}}</h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价: <s>￥{{info.market_price}}</s>    销售价：<span>￥{{info.sell_price}}</span>
				</li>
				<li class="inp">
					<span>购买数量：</span>
					<!--  触发一个事件  接收一个值-->
					<inputNum v-on:sendData="getData" ></inputNum>
					<transition name="show"
						@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
						>
						<div v-if="isshow" class="ball"></div>
					</transition>	
				</li>
				<li class="">
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button @click="toShopCar" type="danger" size="small">加入购物车</mt-button>
				</li>
			</ul>
		</div>

		<div id="params">
				<h6>商品参数</h6>
				<p class="line"></p>
			<ul>
				<li>商品货号：{{info.goods_no}}</li>
				<li>库存情况：{{info.stock_quantity}}</li>
				<li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
			</ul>
		</div>

		<!--3.0 图文详情-->
		<!--4.0 商品评论-->
		<div id="other">
			<router-link v-bind="{to: '/goods/goodsDesc/' + id}">
				<mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
			</router-link>
			<router-link v-bind="{to: '/goods/goodsComment/' + id}">
				<mt-button type="danger" size="large">商品评论</mt-button>
			</router-link>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import slider from '../subcom/slider.vue';
	
	import inputNum from '../subcom/inputNum.vue';
	
	import {setItem, dataObj} from '../../kits/localStorage.js';
	
	export default {
		components: {
			slider,
			inputNum
		},
		data() {
			return {
				id : 0,
				imgs: '', //轮播图
				info: {},  //商品信息
				carPro: 1, //接收子组件传过来的商品数量
				isshow: false  //控制小球的心显示状态
			}
		},
		created() {
			this.id = this.$route.params.id;
			this.getImgs();
			this.getInfo();
		},
		methods: {
			//开始动画前  设置动画开始之前元素的初始位置
			beforeEnter(el) {
				el.style.transform = 'translate(0px, 0px)';
			},
			//执行动画中 时刻刷新位置  设置结束时的位置  结束动画
			enter(el, done) {
				el.offsetWidth;
				el.style.transform = 'translate(55px, 336px)';
				done();
			},
			//设置元素到初始时的状态
			afterEnter(el) {
				this.isshow = !this.isshow;
			},
			//购物车  点击加入购物车 通过操作DOM元素设置购物车的商品数量 (将从子组件获取的数据设置到购物车)
			toShopCar() {
				var car = document.querySelector('.mui-badge');
				//控制小球执行动画
				this.isshow = !this.isshow;
				car.innerHTML = parseInt(car.innerHTML) + this.carPro;
				//console.log(this.count);
				//将数据存入浏览器
				dataObj.goodsid = this.id; //商品id
				dataObj.count = this.carPro;
				setItem(dataObj);
			},                                                                                                                                                                    
			//count -> 接收子组件发送过来的数据
			getData(count) {
				this.carPro = count;
				//console.log(this.carPro);
			},
			//获取商品信息
			getInfo() {
				var url = this.$common.apidomain + '/api/goods/getinfo/' + this.id;
				this.$http.get(url).then(function (res) {
					this.info = res.body.message[0];
					//console.log(res.body.message[0]);
				});
			},
			//获取轮播图信息
			getImgs() {
				var url = this.$common.apidomain + '/api/getthumimages/' + this.id;
				this.$http.get(url).then(function (res) {
					if (res.body.status != 0) {
						Toast(res.body.message);
						return;
					}
					//console.log(res.body.message);
					res.body.message.forEach(function (item) {
						item.img = item.src;
					});
					this.imgs = res.body.message;
				})
			}
		}
	}
</script>

<style scoped>
	.mint-swipe {
		height: 90vw !important;
	}
	.mint-swipe img {
		width: 100%;
		height: 90vw;
	}
	
	.silder{
	 border:1px solid rgba(0,0,0,0.4);
	 border-radius: 5px;
	 margin: 5px;
 	}
	#buy,#params,#other
	{
		margin: 5px;
		padding: 5px;
		border:1px solid rgba(0,0,0,0.4);
		border-radius: 5px;
	}
 	.line{
		height: 1px;
		border: 1px solid rgba(0,0,0,0.2);
	}
	#buy ul,#params ul{
		padding-left: 0px;
	}
	 #buy h4{
		 color:#0094ff;
		padding: 5px;
	 }
	 #buy li,#params li{
		 list-style: none;
		 padding: 8px;
	 }

	#buy .price span{
		color:red;
	}

	#other .imgdesc{
		margin-bottom: 20px;
	}
	.inp {
		position: relative;
		z-index: 9999999990;
	}
	.ball{
		background-color: red;
		height: 20px;
		width: 20px;
		border-radius: 50%;
		position: absolute;
		left:170px;
		top:10px;
		transition: all .4s ease;
		z-index: 999;
	}
</style>